<template>

	<div class="user-list">

		<div class="messge-li unified-transition flex unified-flex-space-between unified-flex-align"
			v-for="(messItem,index) in message" :key="index">

			<userAvatar></userAvatar>
			<div class="message">

				<div class="Indicate flex unified-flex-space-between unified-flex-align">
					<span>我是用户名</span>
					<span>16:19</span>
				</div>
				<div class="show-message flex unified-flex-space-between unified-flex-align">
					<span class="value">我是消息的内容</span>
					<span class="tips unified-color-white">9</span>
				</div>
			</div>
			<div class="messge-separate"></div>
		</div>

	</div>
</template>

<script>
	import userAvatar from '../../components/avatar/avatar-status.vue'
	export default {
		components: {
			userAvatar
		},

		data() {


			return {

				message: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
			}

		}

	}
</script>

<style scoped="scoped">
	.user-list {
	}
	.message {
		flex: 1;
		display: flex;
		height: 100%;
		flex-direction: column;
		justify-content: center;
		padding: 15px 0px;
		box-sizing: border-box;
		padding-right: 10px;
		margin-left: 5px;
	}

	.Indicate {
		width: 100%;
		height: 20px;
		font-size: 12px;
	}

	.show-message {
		width: 100%;
		height: 20px;
		flex: 1;
		font-size: 8px;
		color: #8C939D;
	}

	.tips {
		width: 15px;
		height: 15px;
		line-height: 15px;
		text-align: center;
		background-color: #FF5B49;
		display: inline-block;
		border-radius: 50%;
	}

	.messge-li {
		width: 100%;
		height: 70px;
		cursor: default;
		position: relative;
		padding-left: 5px;
		box-sizing: border-box;
		/* padding-right: 6px; */
	}

	.messge-separate {
		width: 100%;
		height: 1px;
		background-color: #C3C3C322;
		position: absolute;
		left: 0;
		top: -1px;
	}

	.messge-li:hover {
		background-color: #8C939D66;
	}

	.user-data {
		width: 80px;
		height: 100%;
	}

	.messge-div {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: 12px;
		padding-right: 30px;
	}

	.messge {
		color: #8C939D;
		flex: 1;
		margin-right: 10px;
	}
</style>
